import React, { useState } from "react";
import {
  Card,
  Table,
  Button,
  Modal,
  Form,
  Input,
  Space,
  message,
  Popconfirm,
} from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";

interface Permission {
  id: number;
  name: string;
  code: string;
  description?: string;
}

const initialPermissions: Permission[] = [
  {
    id: 1,
    name: "查看用户",
    code: "view:user",
    description: "可以查看用户列表",
  },
  {
    id: 2,
    name: "创建用户",
    code: "create:user",
    description: "可以创建新用户",
  },
  {
    id: 3,
    name: "编辑用户",
    code: "edit:user",
    description: "可以编辑用户信息",
  },
  { id: 4, name: "删除用户", code: "delete:user", description: "可以删除用户" },
  {
    id: 5,
    name: "查看角色",
    code: "view:role",
    description: "可以查看角色列表",
  },
  {
    id: 6,
    name: "创建角色",
    code: "create:role",
    description: "可以创建新角色",
  },
  {
    id: 7,
    name: "编辑角色",
    code: "edit:role",
    description: "可以编辑角色信息",
  },
  {
    id: 8,
    name: "删除角色",
    code: "delete:role",
    description: "可以删除角色",
  },
  {
    id: 9,
    name: "查看系统设置",
    code: "view:settings",
    description: "可以查看系统设置",
  },
  {
    id: 10,
    name: "编辑系统设置",
    code: "edit:settings",
    description: "可以编辑系统设置",
  },
  {
    id: 11,
    name: "分配权限",
    code: "assign:permission",
    description: "可以分配角色权限",
  },
  {
    id: 12,
    name: "查看权限",
    code: "view:permission",
    description: "可以查看权限配置",
  },
];

const PermissionPage: React.FC = () => {
  const [permissions, setPermissions] =
    useState<Permission[]>(initialPermissions);
  const [modalVisible, setModalVisible] = useState(false);
  const [editing, setEditing] = useState<Permission | null>(null);
  const [form] = Form.useForm();

  const columns = [
    { title: "权限名称", dataIndex: "name", key: "name" },
    { title: "权限编码", dataIndex: "code", key: "code" },
    { title: "描述", dataIndex: "description", key: "description" },
    {
      title: "操作",
      key: "action",
      render: (_: any, record: Permission) => (
        <Space>
          <Button
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
            type="link"
          >
            编辑
          </Button>
          <Popconfirm
            title="确定删除该权限吗？"
            onConfirm={() => handleDelete(record.id)}
          >
            <Button icon={<DeleteOutlined />} type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const handleAdd = () => {
    setEditing(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record: Permission) => {
    console.log(record);
    setEditing(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (id: number) => {
    setPermissions(permissions.filter((p) => p.id !== id));
    message.success("删除成功");
  };

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      if (editing) {
        setPermissions(
          permissions.map((p) =>
            p.id === editing.id ? { ...p, ...values } : p
          )
        );
        message.success("编辑成功");
      } else {
        setPermissions([...permissions, { ...values, id: Date.now() }]);
        message.success("添加成功");
      }
      setModalVisible(false);
    } catch {}
  };

  return (
    <Card
      title="权限配置"
      extra={
        <Button icon={<PlusOutlined />} type="primary" onClick={handleAdd}>
          新增权限
        </Button>
      }
    >
      <Table
        rowKey="id"
        columns={columns}
        dataSource={permissions}
        pagination={{ pageSize: 8, showSizeChanger: false }}
      />
      <Modal
        title={editing ? "编辑权限" : "新增权限"}
        open={modalVisible}
        onOk={handleOk}
        onCancel={() => setModalVisible(false)}
        okText="确定"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="name"
            label="权限名称"
            rules={[{ required: true, message: "请输入权限名称" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="code"
            label="权限编码"
            rules={[{ required: true, message: "请输入权限编码" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="description" label="描述">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
};

export default PermissionPage;
